<template>
  <el-dialog
    title="班次信息"
    :visible.sync="dialogVisible"
    :modal="true"
    :appendToBody="true"
    width="52%"
    v-dialog-drag
    :close-on-click-modal="false"
    top="5vh"
    @close="handleClose()"
    @open="handleOpen()"
  >
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px">
      <el-form-item label="班次类型编码" prop="classesCode">
        <el-row type="flex" justify="space-around">
          <el-col :span="12">
            <el-input type="text" v-model="form.classesCode" placeholder="请输入班次类型编码" :disabled='row && row.id ? true :false'></el-input>
          </el-col>
          <el-col :span="10">
            <el-switch
              v-model="systemNo"
              active-text="系统编号"
              class="system-num"
              @change="handleGetCode"
              :disabled='row && row.id ? true :false'
            >
            </el-switch>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="班次类型名称" prop="classesName">
        <el-input type="text" v-model="form.classesName" placeholder="请输入班次类型名称"></el-input>
      </el-form-item>

      <el-form-item label="开始时间" prop="startTime">
         <el-time-picker
          v-model="form.startTime"
          clearable
          value-format="HH:mm:ss"
          placeholder="请选择开始时间">
        </el-time-picker>
      </el-form-item>

      <el-form-item label="结束时间" prop="endTime">
        <el-time-picker
          v-model="form.endTime"
          clearable
          value-format="HH:mm:ss"
          placeholder="结束时间">
        </el-time-picker>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" :loading="saveloading" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import {
  getClasses,
  addOrUpdateClasses} from "@/api/team/classes";
  import { getNextCodeByModule } from "@/api/common";
  import {validLetterDigit,validLetterDigitUnderline,patterns} from "@/utils/validate";
  import { timeList } from "../enum";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      form: {
        classesCode: null,
        classesName: null,
        startTime: null,
        endTime: null
      },
      systemNo:false,
      rules: {
        classesCode: [
          { required: true, message: "请输入班次类型编码" },
          { pattern: patterns.letterDigit, message: "班次类型编码只能是字母和数字", trigger: 'blur' },
          { max: 32, message: "不能超过32个字符", trigger: "blur" },
          // {validator: validLetterDigit, trigger: "blur" }
        ],
        classesName: [
          { required: true, message: "请输入班次类型名称", trigger: "blur" },
          { pattern: patterns.letterDigitUnderline, message: "班次类型名称只能是中文，英文，数字和下划线", trigger: 'blur' },
          { max: 32, message: "不能超过32个字符", trigger: "blur" },
        ],
        startTime: [
          { required: true, message: "请输入开始时间", trigger: "change" },
        ],
        endTime: [
          { required: true, message: "请输入结束时间", trigger: "change" },
        ]
      },
      timeList,
      saveloading: false
    };
  },
  computed: {
    dialogVisible: {
      set(val) {
        this.$emit("update:visible", val)
      },
      get() {
        return this.visible
      }
    }
  },
  methods: {
    handleClose() {
      this.saveloading = false;
      this.systemNo = false;
      this.resetFormData()
    },
    handleOpen() {
      if (!this.row?.id) {
        this.resetFormData();
        return
      }
      getClasses(this.row.id)
      .then(res=>{
        if (res.code == 200 && res.data) {
          this.form = res.data
        } else {
          this.resetFormData()
        }
      }).catch(() => {
        this.resetFormData()
      })
    },
    handleSubmit() {
      this.saveloading = true
      this.$refs.ruleForm
      .validate((flag) => {
        if (flag) {
          addOrUpdateClasses(this.form).then(res => {
            if (res.code == 200) {
              this.msgSuccess("操作成功")
              this.$emit("submit-success")
              this.dialogVisible = false
            } else {
              this.msgError(res.msg || "操作失败")
            }
            this.saveloading = false
          }).catch(() => {
            this.msgError("操作失败")
            this.saveloading = false
          })
        } else {
          this.saveloading = false
        }
      })
    },

    //获取系统编码
    handleGetCode(value) {
      if (value == true) {
        getNextCodeByModule("CLASSES").then((res) => {
          if (res.code == 200) {
            this.form.classesCode = res.data || null;
          }
        });
      }
    },

    resetFormData() {
      this.$refs.ruleForm?.resetFields()
      this.form = {
        classesCode: null,
        classesName: null,
        startTime: null,
        endTime: null
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.el-form {
  display: flex;
  justify-content: space-between;
  flex-flow: wrap;
  .el-form-item {
    width: 49%;
  }
  .el-date-editor.el-input,
  .el-select {
    width: 100%;
  }
}
</style>
